<template>
  <div :style="{ height: height }" ref="chart"></div>
</template>

<script>
// const echarts = require('echarts');
export default {
  props: {
    title: {
      type: String,
      default: '标题'
    },
    legendList: {
      type: Array,
      default: () => []
    },
    xAxisData: {
      type: Array,
      default: () => ['Jan', 'Feb', 'Mar', 'Apr ', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']
    },
    seriesData: {
      type: Array,
      default: () => []
    },
    height: {
      type: String,
      default: '300px'
    },
    change: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    change(newVal, oldVal) {
      console.log('2222')
      if (this.chart) {
        this.setOptions()
      } else {
        this.initCharts()
      }
    }
  },
  methods: {
    initCharts() {
      this.chart = this.echarts.init(this.$refs.chart)
      this.setOptions()
    },
    setOptions() {
      console.log('更新数据视图》》》》》》》')
      let that = this
      let seriesDataSetOptions = JSON.parse(JSON.stringify(that.seriesData))
      console.log('》》',seriesDataSetOptions)
      // 为每个图增加配置项
      let linMax = 0
      let linMin = 0
      let barMax = 0
      let barMin = 0
      let lineMaxArr = []
      let lineMinArr = []
      seriesDataSetOptions.forEach(item => {
        if (item.type === 'line'){
          if (item.data && item.data.length > 0){
            console.log(333344)
            lineMaxArr.push(Math.max.apply(null, item.data.map(Number)))
            lineMinArr.push(Math.min.apply(null, item.data.map(Number)))
          }else{
            lineMaxArr.push(0)
            lineMinArr.push(0)
          }
          if (item.name && item.name.indexOf('Goal') !== -1){
            item.itemStyle = {
              normal: {
                label: {
                  show: false,
                }
              }
            }
          }else{
            item.itemStyle = {
              normal: {
                label: {
                  show: true,
                  position:'top',
                  formatter:function(value){
                    let a = Math.round(value.value * 10000) / 100
                    return a+'%'
                  }
                }
              }
            }
          }
          linMax = Math.max.apply(null, lineMaxArr.map(Number))
          linMin = Math.max.apply(null, lineMinArr.map(Number))
        }else{
          if (item.data.length > 0){
            barMax = Math.max.apply(null, item.data.map(Number))
            barMin = Math.min.apply(null, item.data.map(Number))
          }
          item.itemStyle = {
            normal: {
              label: {
                show: true,
                position:'top',
              }
            }
          }
        }
      })
      linMax = linMax * 1.2
      // linMin = (linMin * 0.9).toFixed(0)
      barMax = barMax * 2
      // barMin = (barMin * 0.9).toFixed(0)
      // 绘制图表
      that.chart.setOption({
        title: { text: that.title, left: 'center' },
        tooltip: {
          trigger: 'axis',
          formatter:function(params){
            let str = ``
            for(let i = 0;i<params.length;i++){
              if(i === 0){
                let val = ''
                if (params[i].seriesType === 'line'){
                  val = Math.round(params[i].value * 10000) / 100 + '%'
                }else{
                  val = params[i].value
                }
                str += params[0].axisValueLabel + '<br>' + params[i].marker + params[i].seriesName + ':' + val
              }else{
                let val = ''
                if (params[i].seriesType === 'line'){
                  val = Math.round(params[i].value * 10000) / 100 + '%'
                }else{
                  val = params[i].value
                }
                str += '<br>' + params[i].marker + params[i].seriesName + ':' + val
              }
            }
            return str
          }
        },
        grid:{
          right:'15%',
          left:'15%'
        },
        legend: {
          data: that.legendList,
          bottom: 5
        },
        xAxis: {
          data: that.xAxisData,
          axisLabel:{
            rotate:that.xAxisData.length <= 10 ? 0 : 90
          }
        },
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              show: true
            },
            axisTick:{
              show: true
            },
            max:barMax,
            minInterval: 1,
            // min:barMin * 0.8
          },
          {
            type: 'value',
            axisLabel: {
              show: true,
              interval: 'auto',
              formatter: function (value, index) {  //Y轴的自定义刻度值，对应上图
                let a = value * 100
                return a+'%';
              }
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true
            },
            axisTick:{
              show: true
            },
            max:linMax,
            // min:linMin
          }
        ],
        series: seriesDataSetOptions
      })
    }
  },
  mounted() {
    setTimeout(() => {
      this.initCharts()
    }, 1000)
  }
}
</script>

<style scoped>

</style>